<template>
  <view class="search-page">
    <view class="search-content">
      <view class="search-input">
        <input v-model="value" placeholder="搜索商品" type="text" />
        <button @click="search">搜索</button>
      </view>
    </view>
    <view class="block">
      <view class="title">
        <text>历史搜索</text>
        <image @click="clearhistory()" src="../../static/lj.png" mode="widthFix" style="width: 39rpx; height: 40rpx" />
      </view>
      <view class="flex flex-wrap list">
        <view class="item" v-for="(item,index) in history" @click="toResult(item)">{{item}}</view>
      </view>
      <view v-if="!history.length" style="text-align: center;font-size:26rpx;color:gray;">无历史记录</view>
    </view>
    <!-- <view class="block">
      <view class="title">
        <text>推荐搜索</text>
      </view>
      <view class="flex flex-wrap list">
        <view class="item" v-for="item in 4">手表</view>
      </view>
    </view> -->
    <view class="hot-search-list">
      <view class="flex">
        <!-- <image src="../../static/logo.png" mode="widthFix" style="width: 30rpx; height: 30rpx" /> -->
        <text class="title">热门搜索</text>
      </view>
      <view class="hot-search-item" v-for="(item, index) in list" :key="`hot-search-${index}`"  @click="toResult(list[index])">
        <view class="flex ali-c" >
          <view class="index" :class="{
            red: index == 0,
            orange: index == 1,
            yellow: index == 2,
          }">{{ index + 1 }}</view>
          <view class="ml-20">{{item}}</view>
          <!-- <view class="ml-20 label" :class="{
            new: index % 2 == 0,
          }">热</view> -->
        </view>
       <!-- <image v-if="index % 2 == 0" src="/static/image/hot-arrow-up.png" mode="widthFix"
          style="width: 20rpx; height: 30rpx" />
        <image v-else src="/static/image/hot-arrow-down.png" mode="widthFix" style="width: 20rpx; height: 30rpx" /> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      history:[],
      value:''
    };
  },
  onLoad() {
    this.getList()
    this.getHistory()
  },
  onShow() {
    this.getHistory()
  },
  methods:{
    getHistory(){
      this.history = uni.getStorageSync('history') || []
    },
    search(){
      if(!this.value) return
      let history = uni.getStorageSync('history') || []
      if(!history.find(item=>item == this.value)){
        history.unshift(this.value)
      }else{
        history.splice(history.findIndex(item=>item == this.value),1)
        history = [this.value,...history]
      }
      uni.setStorageSync('history',history)
      this.toResult(this.value)
    },
	//删除历史记录
	clearhistory(){
		 this.history=[]
		 uni.setStorageSync('history',this.history)
	},
    async getList(){
      let {data} = await this.$http({
        url:'/api/wechat/hotSearch',
      })
      this.list = data.split(',')
	  console.log(data,'data')
    },
    toResult(world){
      uni.navigateTo({
        url:`/pagemy/seacherresult/seacherresult?keyword=${world}`
      })
    }
  }
};
</script>

<style lang="scss">
.search-page {
  .search-content {
    height: 124rpx;
    width: 100vw;
    background: white;
    z-index: 9;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  .search-input {
    border: 1px solid #E2E2E2;
    border-radius: 100upx;
    display: flex;
    flex: 1;
    box-sizing: border-box;
    margin: 0 28rpx;

    input {
      flex: 1;
      line-height: 70rpx;
      height: 70rpx;
      padding: 0 30rpx;
      padding-left: 80upx;
      background: url('/static/ss.png') no-repeat;
      background-size: 40upx;
      background-position: 30upx;
    }

    button {
      width: 112rpx;
      height: 70rpx;
      background: #FF8A9B;
      border-radius: 36rpx 36rpx 36rpx 36rpx;
      font-size: 28rpx;
      color: white;
    }
  }

  .block {
    padding: 0 30rpx;
    box-sizing: border-box;
    margin-top: 40rpx;

    .title {
      font-size: 32rpx;
      font-weight: 500;
      color: #222222;
      line-height: 38rpx;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }
  }

  .list {
    gap: 30rpx;
    padding-top: 30rpx;

    .item {
      padding: 0 36rpx;
      height: 64rpx;
      line-height: 64rpx;
      border-radius: 100px;
      background: white;
      font-size: 28rpx;
    }
  }

  .hot-search-list {
    padding: 28rpx;
    box-sizing: border-box;
    background: white url('/static/bg.png') no-repeat;
    background-size: 100% 200rpx;
    margin-top: 54rpx;

    .title {
      margin-left: 45rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #cb9852;
      line-height: 38rpx;
	  margin-top: 20rpx;
    }

    .hot-search-item {
      display: flex;
      justify-content: space-between;
      padding: 14rpx 0;
      font-size: 28rpx;

      .index {
        width: 36rpx;
        height: 36rpx;
        background: #dcc8b2;
        border-radius: 6rpx 6rpx 6rpx 6rpx;
        opacity: 1;
        color: white;
        text-align: center;
        line-height: 36rpx;
		margin-right: 10rpx;
      }

      .red {
        background: linear-gradient(180deg, #fb7237 0%, #fc3406 100%);
      }

      .orange {
        background: linear-gradient(180deg, #f3a616 0%, #fa5704 100%);
      }

      .yellow {
        background: linear-gradient(180deg, #efd34c 0%, #e99d3a 100%);
      }

      .label {
        border: 1rpx solid #cb9852;
        color: #cb9852;
        width: 38rpx;
        height: 38rpx;
        text-align: center;
        border-radius: 6rpx 6rpx 6rpx 6rpx;
        background: #fff6e8;
      }

      .new {
        border: 1rpx solid #f99529;
        background: #ffefde;
        color: #f99529;
      }
    }

    .hot-search-item:nth-child(2) {
      padding-top: 29rpx;
    }
  }
}
</style>
